Create a Stunning Resume with Tailwind CSS (Source Code)

By Faraz - November 01, 2023

Learn how to design a standout resume using Tailwind CSS. This step-by-step tutorial will help you create an impressive online resume with ease.

Join us on Telegram

Create a Stunning Resume with Tailwind CSS.jpg

Read Also how-to-write-a-plan-expiry-alert-email-with-an-html-template.webp

How to Write a Plan Expiry Alert Email with an HTML Template

Creating a compelling resume is crucial in today's competitive job market. With Tailwind CSS, you can design a visually stunning and responsive online resume that will leave a lasting impression on potential employers. In this tutorial, we'll show you how to harness the power of Tailwind CSS to create an impressive resume that showcases your skills and qualifications effectively.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

Begin by structuring your resume layout using HTML. Define sections for your contact information, summary, work experience, education, and skills. Utilize Tailwind CSS classes to create a clean and organized layout that is easy to navigate.

Let's break down the code and explain its structure and elements:

1. <!DOCTYPE html>: The <!DOCTYPE html> declaration specifies the document type and version of HTML being used, which is HTML5.

2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">: The <html> element is the root element of the HTML document. The lang attribute is set to "en" to specify the document's language as English. The xmlns attribute specifies the XML namespace.

3. <head>: The <head> element contains metadata about the document, such as character encoding, viewport settings, linked stylesheets, and the document's title.

<meta charset="UTF-8">: This meta tag specifies the character encoding of the document as UTF-8, which is commonly used for encoding text in various languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring proper scaling on various devices, such as smartphones and tablets.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">: This link tag references a stylesheet for Font Awesome icons, allowing the use of Font Awesome icons in the document.
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">: This link tag references a Google Fonts stylesheet, allowing the use of the "Jost" font family with various styles and weights.
<link href="styles.css" rel="stylesheet">: This link tag references an external CSS file named "styles.css," which contains additional styles for the document.
<title>Resume using Tailwind CSS</title>: This title tag specifies the title of the document, which will be displayed in the browser's title bar or tab.

4. <body class="bg-hero-zig-zag">: The <body> element represents the main content of the HTML document. The class attribute assigns a CSS class, "bg-hero-zig-zag," to the <body> element, which sets a background image or styling for the entire page.

5. <main class="font-jost hyphens-manual">: The <main> element represents the main content of the document. It has CSS classes "font-jost" and "hyphens-manual," which apply font styles and control hyphenation behavior.

6. Inside the <main> element, there is a structure that represents a typical resume layout, with sections for the individual's name, contact information, summary, experience, education, projects, and skills. Each section is marked with appropriate headings and subheadings, and the content is organized in a clear and structured manner.

The name, job title, location, and initials of the individual are displayed at the beginning of the document.
Contact information includes email and phone details.
Summary, experience, education, projects, and skills are each presented in their respective sections with appropriate headings and content.
In various places, CSS classes are used to style the elements, applying typography, spacing, and visual design.
Links within the document are used for email addresses, phone numbers, and project references.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Resume using Tailwind CSS</title>
</head>
<body class="bg-hero-zig-zag">
  <main class="font-jost hyphens-manual">
    <!-- Page -->
    <div class="max-w-3xl p-3 mx-auto my-auto bg-gray-100 border-4 border-gray-700 print:border-0 page print:max-w-letter print:max-h-letter print:mx-0 print:my-o lg:h-letter md:max-w-letter md:h-letter xsm:p-8 sm:p-9 md:p-16 lg:mt-6 rounded-2xl print:bg-white">
      <!-- Name -->
      <header class="inline-flex items-baseline justify-between w-full mb-3 align-top border-b-8">
        <div class="block">
          <h1 class="mb-0 text-5xl font-bold text-gray-750">
            Rahul Patel
          </h1>
          <!--Job Title -->
          <h2 class="m-0 ml-2 text-2xl font-semibold text-gray-700 leading-snugish">
            Front End Developer
          </h2>
          <!--Location -->

          <h3 class="m-0 mt-2 ml-2 mb-2 font-semibold text-md text-gray-550 leading-snugish">
            Gujarat
          </h3>
        </div>
        <!-- Initials Block -->
        <div class="justify-between px-3 mt-0 mb-5 text-3xl font-bold leading-none text-gray-200 initials-container bg-gray-750 print:bg-black" style="padding-bottom: 1.5rem; padding-top: 1.5rem;">
          <div class="text-center initial">R</div>
          <div class="text-center initial">P</div>
        </div>
      </header>

      <!-- Column -->
      <div class="col-gap-16 md:col-count-2 print:col-count-2 md:h-letter-col-full print:h-letter-col-full col-fill-balance">
        <!-- Contact Information -->
        <section class="pb-4 mt-4 first:mt-0">
          <div class="break-inside-avoid">
            <section class="pb-2 mb-2 border-b-2 break-inside-avoid">
              <ul class="list-inside pr-7">

                <li class="mt-1 leading-normal transition duration-100 ease-in text-gray-550 text-md hover:text-gray-700">
                  <a href="mailto:demo@gmail.com" class="group">
                    <span class="mr-8 text-xl font-semibold text-gray-700 leading-snugish">
                      Email:
                    </span>
                    demo@gmail.com
                    <span class="inline-block font-normal transition duration-100 ease-in text-gray-550 print:text-black group-hover:text-gray-700">
                      ↗
                    </span>
                  </a>
                </li>
                <li class="mt-1 leading-normal transition duration-100 ease-in text-gray-550 text-md hover:text-gray-700">
                  <a href="tel:+9106753674">
                    <span class="mr-5 text-xl font-semibold text-gray-700 leading-snugish">
                      Phone:
                    </span>
                    +91(123)456-7890
                  </a>
                </li>
              </ul>
            </section>
          </div>
        </section>
        <!--Summary -->
        <section class="pb-2 pb-4 mt-4 border-b-4 first:mt-0">
          <!-- To keep in the same column -->
          <div class="break-inside-avoid">
            <h2 class="mb-2 text-xl font-bold tracking-widest text-gray-700 print:font-normal">
              SUMMARY
            </h2>

            <section class="mb-2 break-inside-avoid">
              <p class="mt-2 leading-normal text-gray-700 text-md">
                Front-End Developer with proven experience at Netizens Technologies in helping companies create and maintain a better code base for reusability. Passionate about learning and development .Eager to tackle more complex problems and continue to find ways to maximize user efficiency.
              </p>
            </section>
          </div>
        </section>
        <!--Experience -->
        <section class="pb-2 pb-4 mt-4 border-b-4 first:mt-0">
          <!-- To keep in the same column -->
          <div class="break-inside-avoid">
            <h2 class="mb-2 text-xl font-bold tracking-widest text-gray-700 print:font-normal">
              EXPERIENCE
            </h2>
            <!--Job 1-->
            <section class="mb-2 break-inside-avoid">
              <header>
                <h3 class="text-xl font-semibold text-gray-650 leading-snugish">
                  Front End Developer ( 2 Years )
                </h3>
                <p class="leading-normal text-md text-gray-550">
                  April 2021 – April 2023 | ABC Technologies
                </p>
              </header>
              <ul class="mt-2.1 text-md text-gray-700 leading-normal">
                <li>
                  <span class="transform -translate-y-px select-none text-gray-550">
                    ›
                  </span>
                  Create Responsive Site With W3C Standards.
                </li>
                <li>
                  <span class="transform -translate-y-px select-none text-gray-550">
                    ›
                  </span>
                  Crafted literate, Comprehensive Source Code.
                </li>
                <li>
                  <span class="transform -translate-y-px select-none text-gray-550">
                    ›
                  </span>
                  Provided commentary to improve maintainability
                </li>
                <li>
                  <span class="transform -translate-y-px select-none text-gray-550">
                    ›
                  </span>
                  Add Site Base Animation Using Keyframe and SVG Animation
                </li>
              </ul>
            </section>
            <!-- Additional Jobs Would Go Here-->
          </div>
        </section>
        <!--Education -->
        <section class="pb-2 pb-4 mt-4 first:mt-0">
          <!-- To keep in the same column -->
          <div class="break-inside-avoid">
            <h2 class="mb-2 text-xl font-bold tracking-widest text-gray-700 print:font-normal">
              EDUCATION
            </h2>
            <!-- school -->
            <section class="pb-4 mt-4 mb-4 border-b-2 break-inside-avoid">
              <header>
                <h3 class="flex-grow text-xl font-semibold text-gray-700 leading-snugish">
                  University Of India
                </h3>
                <p class="leading-normal text-md text-gray-550">
                  2017 – 2020 | Master Of Computer Application
                </p>
              </header>
              <p class="mt-1 leading-normal text-md text-gray-650">
                <span class="font-semibold text-gray-700 text-md leading-snugish">
                  Major:
                </span>
                Computer Science
              </p>
              <p class="leading-normal text-gray-700 text-md">
                <span class="font-semibold text-gray-700 text-md leading-snugish">
                  CGPA:
                </span>
                5.9
              </p>
            </section>
            <!--school 2 ->
            <section class="pb-4 mt-4 mb-4 border-b-2 break-inside-avoid">
              <header>
                <h3 class="flex-grow text-xl font-semibold text-gray-700 leading-snugish">
                  College For BCA
                </h3>
                <p class="leading-normal text-md text-gray-550">
                  2014 – 2017 | Bechlor of Computer Applications
                </p>
              </header>
              <p class="mt-1 leading-normal text-md text-gray-650">
                <span class="font-semibold text-gray-700 text-md leading-snugish">
                  Major:
                </span>
                Computer Science
              </p>
              <p class="mt-1 leading-normal text-md text-gray-650"></p>
              <p class="leading-normal text-gray-700 text-md">
                <span class="font-semibold text-gray-700 text-md leading-snugish">
                  CGPA:
                </span>
                6.09
              </p>
            </section>
          </div>
        </section>
        <!--Projects -->
        <section class="pb-2 pb-4 mt-4 border-b-4 first:mt-0">
          <div class="break-inside-avoid">
            <!-- To keep in the same column -->
            <h2 class="mb-2 text-xl font-bold tracking-widest text-gray-700 print:font-normal">
              PROJECTS
            </h2>
            <!--Project 1 -->
            <section class="pb-4 mb-4 border-b-2 break-inside-avoid">
              <header>
                <h3 class="text-xl font-semibold text-gray-700 leading-snugish">
                  <a href="#!" class="group">
                    Shipper (Transportation App)
                  </a>
                </h3>
                <p class="leading-normal text-md text-gray-550">
                  2017 | Android, Java, HTML, CSS, PHP
                </p>
              </header>
              <p class="mt-2.1 text-md text-gray-700 leading-normal">
                Shippers fulfill an important part of the supply chain. Whether by trucking, or freight train, or air, shippers deliver both packages and cost-savings to their dedicated customers.
              </p>
            </section>
            <!--Project 2-->
            <section class="pb-4 mb-4 border-b-2 break-inside-avoid">
              <header>
                <h3 class="text-xl font-semibold text-gray-700 leading-snugish">
                  <a href="#!" class="group">
                    Speech Recognization Application
                  </a>
                  <span class="inline-block font-normal transition duration-100 ease-in text-gray-550 print:text-black group-hover:text-gray-700">
                  </span>
                </h3>
                <p class="leading-normal text-md text-gray-550">
                  2020 | Asp.Net,HTML,CSS
                </p>
              </header>
              <p class="mt-2.1 text-md text-gray-700 leading-normal">
                We are working on an ASP.NET web application which requires the functionality to recognize user’s voice from client side. Is it possible to record this voice and compare it with a predefined text which is in the database at server end, in technology like Asp.net.
              </p>
            </section>
            <section class="pb-4 mb-4 border-b-2 break-inside-avoid">
              <header>
                <h3 class="text-xl font-semibold text-gray-700 leading-snugish">
                  <a href="#!" class="group">
                    NGO Website
                  </a>
                  <span class="inline-block font-normal transition duration-100 ease-in text-gray-550 print:text-black group-hover:text-gray-700">
                  </span>
                </h3>
                <p class="leading-normal text-md text-gray-550">
                  2020 | HTML, CSS, SCSS, Javascript, SQL, PHP
                </p>
              </header>
              <p class="mt-2.1 text-md text-gray-700 leading-normal">
                Smile Foundation, an Indian social development organization, is directly benefitting over 15 lakh children and their families every year. We have more than 400 live welfare projects on education, healthcare, livelihood, and women’s empowerment in over 2,000 remote villages and urban slums across 25 states of India.
              </p>
            </section>
          </div>
        </section>
        <!--Begin Skills -->
        <section class="pb-4 mt-4 first:mt-0">
          <!-- To keep in the same column -->
          <div class="break-inside-avoid">
            <h2 class="mb-2 text-xl font-bold tracking-widest text-gray-700 print:font-normal">
              SKILLS
            </h2>
            <!--Front-End Developer --->
            <section class="mb-2 break-inside-avoid">
              <header>
                <h3 class="text-xl font-semibold text-gray-700 leading-snugish">
                  Front-End Developer
                </h3>
              </header>

              <div class="my-1 last:pb-1">
                <ul class="flex flex-wrap text-sm2 leading-relaxed -mr-1.6 -mb-1 mt-2.1">
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    HTML5
                  </li>
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    CSS3
                  </li>
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    SCSS
                  </li>

                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    Tailwind.css
                  </li>
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    Javascript
                  </li>
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    PHP
                  </li>
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    JQuery
                  </li>
                  <li class="text-md px-2.5 py-0.5 mr-1.6 mb-1 text-gray-200 leading-relaxed print:bg-white print:border-inset bg-gray-250 mb-3">
                    BOOTSTRAP
                  </li>
                </ul>
              </div>
            </section>
          </div>
        </section>
      </div>
      <!-- end Column -->
    </div>
    <!-- end Page -->
  </main>
</body>
</html>

Read Also

Create a Pure CSS Sign Up Form / Registration Form in HTML

Step 2 (CSS Code):

Tailwind CSS offers a vast array of utility classes that allow you to style every element of your resume. Customize fonts, colors, and spacing to match your brand. Add icons and background images to enhance the visual appeal.

Let's break down the code step by step:

1. @import: This line imports a font file from Google Fonts. It's importing the "Jost" font in various weights and styles for use in the web page. The display=swap parameter indicates that the browser should use a fallback font until the Jost font is available.

2. @font-face: These rules define custom font faces for the "Jost" font in different weights (400, 500, 600, and 700) and character ranges (unicode-range). They specify the source of the font files, the font display behavior, and the supported character ranges for each weight.

3. normalize.css: These rules include a comment indicating the use of the "normalize.css" library. It seems to provide some default styles to normalize the rendering of HTML elements across different browsers.

4. Styling Rules: Following the normalize.css comment, there are a series of styling rules for HTML elements. These rules set various properties like font size, margin, padding, text alignment, colors, and more for different elements on the web page. For example, you have rules for adjusting the font sizes of headings (h1, h2, h3), styling links (a), and defining text sizes (text-lg, text-xl, etc.).

5. Custom Utility Classes: The code defines some custom utility classes like .bg-gray-100, .text-gray-800, .border-gray-750, etc., which can be used in your HTML to apply specific background colors, text colors, or border colors.

6. Media Queries: The code includes some responsive design rules using media queries. It adjusts the font size and other styles based on the screen width.

7. Print Styles: There are styles specific to printing, which customize the appearance of the page when printed.

8. Hover Styles: Some rules define styles for elements when they are hovered over by the cursor, changing text colors.

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/Jost-SemiBold.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-007f, U+0080-00ff;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/Jost-SemiBold.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-017f, U+0180-024f, U+0250-02af, U+1e??, U+2c60-2c7f,
    U+a720-a7ff, U+ab30-ab6f;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/Jost-SemiBold.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+2000-206f, U+2070-209f, U+20a0-20cf, U+2100-214f, U+2150-218f,
    U+2190-21ff, U+22??, U+25a0-25ff, U+2700-27bf;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Jost-Bold.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-007f, U+0080-00ff;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Jost-Bold.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-017f, U+0180-024f, U+0250-02af, U+1e??, U+2c60-2c7f,
    U+a720-a7ff, U+ab30-ab6f;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Jost-Bold.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+2000-206f, U+2070-209f, U+20a0-20cf, U+2100-214f, U+2150-218f,
    U+2190-21ff, U+22??, U+25a0-25ff, U+2700-27bf;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/Jost-Medium.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-007f, U+0080-00ff;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/Jost-Medium.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-017f, U+0180-024f, U+0250-02af, U+1e??, U+2c60-2c7f,
    U+a720-a7ff, U+ab30-ab6f;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Jost-Medium.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-007f, U+0080-00ff;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Jost-Medium.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-017f, U+0180-024f, U+0250-02af, U+1e??, U+2c60-2c7f,
    U+a720-a7ff, U+ab30-ab6f;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Jost-Medium.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+2000-206f, U+2070-209f, U+20a0-20cf, U+2100-214f, U+2150-218f,
    U+2190-21ff, U+22??, U+25a0-25ff, U+2700-27bf;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
a {
  background-color: transparent;
}
code {
  font-family: monospace, monospace;
  font-size: 1em;
}
input {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
h1,
h2,
h3,
p,
ul {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
}
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  line-height: 1.5;
}
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e2e8f0;
}
input::-moz-placeholder {
  color: #a0aec0;
}
input:-ms-input-placeholder {
  color: #a0aec0;
}
input::placeholder {
  color: #a0aec0;
}
h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  text-decoration: inherit;
}
a,
input {
  color: inherit;
}
input {
  padding: 0;
  line-height: inherit;
}
code {
  font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
body {
  -webkit-font-smoothing: subpixel-antialiased;
}
.bg-gray-100 {
  --bg-opacity: 1;
  background-color: #f7fafc;
}
.bg-gray-250 {
  --bg-opacity: 1;
  background-color: #24262d;
}
.bg-gray-750 {
  --bg-opacity: 1;
  background-color: #343a40;
}
.border-gray-700 {
  --border-opacity: 1;
  border-color: #4a5568;
}
.border-gray-750 {
  --border-opacity: 1;
  border-color: #343a40;
}
.rounded-2xl {
  border-radius: 1rem;
}
.border-4 {
  border-width: 4px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-r-4 {
  border-right-width: 4px;
}
.border-b-4 {
  border-bottom-width: 4px;
}
.border-b-8 {
  border-bottom-width: 8px;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-baseline {
  align-items: baseline;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.flex-grow {
  flex-grow: 1;
}
.font-jost {
  font-family: Jost, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-3xl {
  font-size: 1.85rem;
}
.text-5xl {
  font-size: 2.65rem;
}
.text-sm2 {
  font-size: 0.69rem;
}
.text-md {
  font-size: 1.0625rem;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.34;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snugish {
  line-height: 1.25;
}
.list-inside {
  list-style-position: inside;
}
.m-0 {
  margin: 0;
}
.m-2 {
  margin: 0.5rem;
}
.m-4 {
  margin: 1rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mr-8 {
  margin-right: 2rem;
}
.mr-1\.6 {
  margin-right: 0.4375rem;
}
.mt-2\.1 {
  margin-top: 0.5625rem;
}
.-mb-1 {
  margin-bottom: -0.25rem;
}
.-mr-1\.6 {
  margin-right: -0.4375rem;
}
.first\:mt-0:first-child {
  margin-top: 0;
}
.max-w-3xl {
  max-width: 48rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-3 {
  padding: 0.75rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-2\.5 {
  padding-left: 10px;
  padding-right: 10px;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.last\:pb-1:last-child {
  padding-bottom: 0.25rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-black {
  --text-opacity: 1;
  color: #24262d;
}
.text-gray-100 {
  --text-opacity: 1;
  color: #f7fafc;
}
.text-gray-200 {
  --text-opacity: 1;
  color: #edf2f7;
}
.text-gray-550 {
  --text-opacity: 1;
  color: #8b9cbe;
}
.text-gray-650 {
  --text-opacity: 1;
  color: #555e70;
}
.text-gray-700 {
  --text-opacity: 1;
  color: #4a5568;
}
.text-gray-750 {
  --text-opacity: 1;
  color: #343a40;
}
.text-gray-800 {
  --text-opacity: 1;
  color: #2d3748;
}
.hover\:text-gray-300:hover {
  --text-opacity: 1;
  color: #e2e8f0;
}
.hover\:text-gray-700:hover {
  --text-opacity: 1;
  color: #4a5568;
}
.group:hover .group-hover\:text-gray-300 {
  --text-opacity: 1;
  color: #e2e8f0;
}
.group:hover .group-hover\:text-gray-700 {
  --text-opacity: 1;
  color: #4a5568;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.align-top {
  vertical-align: top;
}
.w-full {
  width: 100%;
}
.col-gap-16 {
  grid-column-gap: 4rem;
  -moz-column-gap: 4rem;
  column-gap: 4rem;
}
.transform {
  --transform-translate-x: 0;
  --transform-translate-y: 0;
  --transform-rotate: 0;
  --transform-skew-x: 0;
  --transform-skew-y: 0;
  --transform-scale-x: 1;
  --transform-scale-y: 1;
  transform: translateX(var(--transform-translate-x))
    translateY(var(--transform-translate-y)) rotate(var(--transform-rotate))
    skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y))
    scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
}
.-translate-y-px {
  --transform-translate-y: -1px;
}
.transition {
  transition-property: background-color, border-color, color, fill, stroke,
    opacity, box-shadow, transform;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.duration-100 {
  transition-duration: 0.1s;
}
@-webkit-keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@-webkit-keyframes ping {
  75%,
  to {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes ping {
  75%,
  to {
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@-webkit-keyframes bounce {
  0%,
  to {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes bounce {
  0%,
  to {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.hyphens-manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
.break-inside-avoid {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}
.col-fill-balance {
  -moz-column-fill: balance;
  column-fill: balance;
}
@media print {
  @page {
    margin: 0;
  }
  body {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    color: #3c3f4c !important;
  }
  .page {
    padding: 4rem !important;
    height: 100vh !important;
  }
  .initial {
    color: transparent !important;
    text-shadow: 0 0 0 #fff !important;
  }
  h1,
  h2,
  h3,
  li,
  p {
    color: #3c3f4c !important;
  }
  html {
    font-size: 11px !important;
  }
}
html {
  font-size: 11px;
  background-color: #f4f4f7;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='120' height='120' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%233c3f4c' fill-opacity='.7' fill-rule='evenodd'/%3E%3C/svg%3E");
}
@media (min-width: 640px) {
  html {
    font-size: calc(-5.58031px + 2.59067vw);
  }
}
@media (min-width: 833px) {
  html {
    font-size: calc(-5.89655px + 2.0284vw);
  }
}
@media (min-width: 1079.5px) {
  html {
    font-size: 11px;
  }
}
i:hover {
  color: #3c3f4c !important;
}
@media print {
  .print\:bg-black {
    --bg-opacity: 1;
    background-color: #24262d;
  }
  .print\:bg-white {
    --bg-opacity: 1;
    background-color: #fdfdfd;
  }
  .print\:border-0 {
    border-width: 0;
  }
  .print\:font-normal {
    font-weight: 400;
  }
  .print\:h-letter-col-full {
    height: 77.9375rem;
  }
  .print\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .print\:max-w-letter {
    max-width: 72rem;
  }
  .print\:text-black {
    --text-opacity: 1;
    color: #24262d;
  }
  .print\:border-inset {
    box-shadow: inset 0 0 0 1px #cbd5e0;
  }
  .print\:col-count-1 {
    -moz-column-count: 1;
    column-count: 1;
  }
  .print\:col-count-2 {
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 500px) {
  .xsm\:p-8 {
    padding: 2rem;
  }
}
@media (min-width: 833px) {
  .md\:h-letter {
    height: 86.9375rem;
  }
  .md\:h-letter-col-full {
    height: 77.9375rem;
  }
  .md\:max-w-letter {
    max-width: 72rem;
  }
  .md\:p-16 {
    padding: 4rem;
  }
  .md\:col-count-1 {
    -moz-column-count: 1;
    column-count: 1;
  }
  .md\:col-count-2 {
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 1079.5px) {
  .lg\:h-letter {
    height: 86.9375rem;
  }
  .lg\:mt-6 {
    margin-top: 1.5rem;
  }
}

Final Output:

Create a Stunning Resume with Tailwind CSS.gif

Read Also make your own responsive pizza shop website using html, css and javascript.jpg

Make Your Own Responsive Pizza Shop Website Using HTML, CSS and JavaScript

Conclusion:

In conclusion, Tailwind CSS is a powerful tool for designing an eye-catching online resume. With this guide, you've learned how to structure, style, and optimize your resume for maximum impact. Now, it's time to start showcasing your skills and talents to the world and take the next steps in your job search journey. Good luck!

Code by: Rahul Patel

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: resume, tailwind css, resume design, css framework, web development, source code, designing a professional resume with tailwind css, using tailwind css for resume layout, tailwind css resume design tutorial

End of the article